<template>
	<view>
		<view class="header flex">
			<image class="card_icon" src="/static/img/wallet/card.png" mode=""></image>
			<view class="">
				请输入您的银行卡信息
			</view>
		</view>
		<view class="form">
			<view class="form_item">
				<view class="label">
					银行卡号
				</view>
				<view class="input">
					<u--input placeholder="请输入银行卡号" @blur="getBankInfo()" placeholderStyle='color:#8B8B8B;'
						border='none' v-model="form.card" type='number'>
					</u--input>
				</view>
			</view>
			<view class="form_item">
				<view class="label">
					选择银行
				</view>
				<view class="input flex" v-if="bankname">
					<!-- <u--input readonly placeholder="请输入选择银行" placeholderStyle='color:#8B8B8B;' border='none'
						v-model="form.bankname" type='number'>
					</u--input> -->
					<image style="width: 58rpx;height:58rpx;border-radius: 50%;margin-right: 17rpx;" :src="bankicon" mode=""></image>
					{{bankname}}
				</view>
				<view class="input flex" v-else>
					<u--input readonly :placeholder="placeholder" :placeholderStyle='placeholderStyle' border='none'
						v-model="form.bankname" type='number'>
					</u--input>
				</view>
				<image class="right_icon" src="/static/img/my/right.png" mode=""></image>
			</view>
			<view class="form_item">
				<view class="label">
					手机号码
				</view>
				<view class="input">
					<u--input placeholder="请输入手机号码" placeholderStyle='color:#8B8B8B;' border='none' v-model="form.phone"
						type='number'>
					</u--input>
				</view>
			</view>
			<view class="form_item">
				<view class="label">
					短信验证
				</view>
				<view class="input">
					<u--input placeholder="请输入短信验证" placeholderStyle='color:#8B8B8B;' border='none' v-model="form.code"
						type='number'>
					</u--input>
				</view>
				<view class="suffix">
					<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
					<u-button @tap="getCode" :text="tips" type="success"></u-button>
				</view>
			</view>
		</view>
		<view class="xieyi flex">
			<view class="check_box flex">
				<image class="check_icon" src="/static/img/shopcar/gou.png" mode=""></image>
			</view>
			<view class="" style="font-size: 24rpx;color: #828191;margin-left: 17rpx;">
				我已同意APP <text style="color: #FF7904;">《服务协议》</text>
			</view>
		</view>
		<view class="footer">
			<view class="btn" @click="submit">
				确认绑定
			</view>
		</view>
	</view>
</template>

<script>
	var BIN = require('bankcardinfo');
	import {shortMsg} from '@/api/login.js'
	import {bindCard} from '@/api/my.js'
	export default {
		data() {
			return {
				form: {
					phone: '',
					card: '',
					code: ''
				},
				tips: '',
				bankname:'',
				placeholder:'请选择银行',
				placeholderStyle:'color:#8B8B8B;',
				bankicon:''
			};
		},
		methods: {
			getCode() {
				let _this=this
				if(!_this.form.phone){
					uni.$u.toast('请输入手机号码');
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						shortMsg({
							mobile: _this.form.phone,
							event: 'resetpwd'
						}).then(res => {
							if (res.data.code == 1) {
								uni.$u.toast('验证码已发送');
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();
							}else{
								uni.$u.toast(res.data.msg);
							}
						});
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			// 绑定
			submit(){
				let {card,phone,code}=this.form
				
				if(!card){
					this.$u.toast('请输入银行卡号')
					return
				}
				if(!this.bankname){
					this.$u.toast('请选择银行')
					return
				}
				if(!code){
					this.$u.toast('请输入验证码')
					return
				}
				bindCard(this.form).then(res=>{
					if(res.data.code==1){
						this.$u.toast('银行卡绑定成功')
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}
					this.$u.toast(res.data.msg)
				})
			},
			getBankInfo() {
				
				let _this = this
				BIN.getBankBin(this.form.card, (err, data) => {
					if (!err) {
						console.log(data)
						this.bankname=data.bankName
						this.bankicon=`https://yangfubing.gitee.io/bank.logo/resource/logo/${data.bankCode}.png`
						console.log(this.bankicon)
					}else{
						this.bankname=''
						this.placeholder='银行卡号错误，请检查!'
						this.placeholderStyle='color:red'
						
					}
					
				})
			}
		},
	}
</script>

<style lang="less">
	.header {
		// width: 750px;
		height: 94rpx;
		background: rgba(255, 99, 3, .1);
		padding: 0 33rpx;
		color: #FF7904;
		font-size: 30rpx;

		.card_icon {
			width: 42rpx;
			height: 32rpx;
			margin-right: 16rpx;
		}
	}

	.form {
		padding: 10rpx 31rpx 28rpx;
		border-top: 2rpx solid #F4F6F8;

		.form_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #F4F6F8;
			height: 105rpx;

			.label {
				color: #828191;
				font-size: 30rpx;
				padding-left: 10rpx;
				width: 200rpx;
			}

			.input {
				font-size: 30rpx;
				flex: 1;
			}

			.right_icon {
				width: 15rpx;
				height: 24rpx;
			}
		}

		.form_title {
			display: flex;
			padding: 45rpx 0 36rpx 10rpx;
			align-items: center;
			color: #333;
			font-size: 30rpx;

			.form_line {
				width: 8rpx;
				height: 28rpx;
				background: #FE712A;
				border-radius: 4rpx;
				margin-right: 10rpx;
			}
		}
	}

	.xieyi {
		padding: 0 0 0 31rpx;

		.check_box {
			width: 28rpx;
			height: 28rpx;
			border-radius: 50rpx;
			border: #828191 solid 2rpx;
			justify-content: center;

			.check_icon {
				width: 28rpx;
				height: 28rpx;
			}
		}
	}

	.footer {
		width: 750rpx;
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 69rpx;
		right: 0;

		.btn {
			width: 687rpx;
			line-height: 114rpx;
			background: linear-gradient(153deg, #FF8717, #FF5F00);
			border-radius: 57rpx;
			text-align: center;
			color: #fff;
			font-size: 36rpx;
		}
	}
</style>
